<template>
    <div class="Home">
        <div class="user_info">
            <ul class="info">
                <li><p class="f14 username">{{user.username}}</p>
                    <p class="f14">{{user.mobile}}</p></li>
                <li>
                    <router-link :to="{ name: 'Detail'}">
                    <p class="site-color username f16">{{user.money}}元</p>
                    <p>账户余额</p>
                    </router-link>
                </li>
            </ul>
            <ul class="data">
                <li class="border"><p class="f12 username">今日新增用户</p>
                    <p class="f16 site-color">{{user.today_users}}</p></li>
                <li class="border"><p class="f12 username">推广总用户</p>
                    <p class="f16 site-color">{{user.total_users}}</p></li>
                <li>

                    <p class="f12 username">奖励总金额</p>
                    <p class="f16 site-color">{{user.total_money}}元</p>

                </li>
            </ul>
        </div>
        <div class="log">
            <div  class="log-title">推广奖励记录</div>
            <table>
                <tr>
                    <th>手机号</th>
                    <th>注册日期</th>
                    <th>奖励</th>
                </tr>
                <tr v-for=" l in logs" >
                    <td>{{l.mobile}}</td>
                    <td>{{l.get_time}}</td>
                    <td class="site-color">{{l.bonus}}元</td>
                </tr>
            </table>
        </div>
        <router-link :to="{ name: 'Invite'}" class="weui-btn weui-btn_primary site-bgcolor" id="rec_btn">邀请新用户注册</router-link>
    </div>
</template>

<script>
    import axios from 'axios';
    import Qs from 'qs';
    export default {
        name: 'Home',
        data() {
            return {
                user:{},
                logs:[
                ],
            }
        },
        mounted(){
          this.getUser();
            this.getLogList();
        },
        methods:{
            getUser(){
                let data={
                    token:localStorage.getItem('token'),
                }
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    method: 'post',
                    url: process.env.API_ROOT+'/api/User/Index',
                    data: Qs.stringify(data)
                })
                    .then(res=>{
                        // let token=res.userinfo.token
                        if(res.data.code==200) {
                            this.user = res.data.data
                        }else{
                            this.$router.push({path:'/Login'})
                        }
                    })
                    .catch(function (error) {

                    });
            },
            getLogList(){
                let data={
                    token:localStorage.getItem('token'),type:2
                }
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    method: 'post',
                    url: process.env.API_ROOT+'/api/User/logList',
                    data: Qs.stringify(data)
                })
                    .then(res=>{
                        // let token=res.userinfo.token
                        this.logs=res.data.data
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        },
        components: {}
    }
    document.title = '勉县红十字医院'
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @import "../assets/css/common.css";
    body {
        background: #eee;

    }
    #rec_btn{
        width: 80%;
        border-radius: 30px;
        padding:10px;
        font-weight: normal;
        color:#eee
    }
    .user_info {
        width: 95%;
        height: 200px;
        border-radius: 5px;
        background: #fff;
        margin: 10px auto;
    }
    .log {
        width: 95%;
        height: 250px;
        overflow: scroll;
        border-radius: 5px;
        background: #fff;
        margin: 15px auto;
        padding-bottom: 10px;
    }
    .log-title{
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        border-bottom: 1px solid #eee;
    }
   table{
       width: 100%;
       margin-left: -17px;
   }
    table th{
       font-weight: normal;
        border-bottom: 1px solid #eee;
    }
    table td{
        color: #a9a9a9;
        border-bottom: 1px solid #eee;
    }
    table .site-color{
        color: #5aace4;
    }
   table tr{
       height: 30px;
       line-height: 30px;
       font-size: 14px;

   }
    .info {
        overflow: hidden;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }

    .info li {
        float: left;
        width: 50%;
        margin-top: 15%;
    }
    .data li {
        float: left;
        width: 33%;
        margin-top: 10%;
    }
    .border{
        border-right: 1px solid #eee;
    }
    .slide{
        width: 0.5px;
        height: 80%;
        background: #eee;
    }
    .username {
        margin-top: -20px;
        margin-bottom: 10px;
    }
</style>
